<template>
  <div class="Login ">
    <h1 class="name">登录</h1>
    <div class="container">
      <div class="option">
        <div class="form">
          <div class="form-item">
            <div class="label">用户名</div>
            <div class="field">
              <i class="iconfont icon-biaoqian"></i>
              <input v-model="value" placeholder="请输入用户名" />
            </div>
          </div>
          <div class="form-item">
            <div class="label">密码</div>
            <div class="field">
              <i class="iconfont icon-yuechi"></i>
              <input v-model="value" placeholder="请输入密码" />
            </div>
          </div>
          <div class="form-item">
            <div class="label">验证码</div>
            <div class="field">
              <i class="iconfont icon-gouwu"></i>
              <input v-model="value" placeholder="请输入验证码" />
            </div>
          </div>

          <div class="submit _center">
            <button @click="authLogin">授权登录</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    authLogin() {
      this.$store.commit("setHasLogined", true);
      let redirtTo = this.$route.query.from;
      this.$router.push(redirtTo);
      localStorage.setItem("token", "1212");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/styles/gobal.scss";
.Login {
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;

  .name {
    font-size: 30px;
    text-align: center;
    font-weight: 700;
    color: #30302a;
  }
  .container {
    width: 100%;
    .option {
      padding: 40px;
      .form {
        .form-item {
          margin-bottom: 20px;
          .label {
            font-weight: 600;
            color: #5e5d5d;
          }
          .field {
            display: flex;
            justify-content: center;
            align-items: center;

            border-bottom: 2px solid rgb(216, 214, 214);
            i {
              font-size: 30px;
              color: #b6b6b8;
            }
            input {
              flex: 1;
              padding: 15px;
              border: none;
            }
          }
        }
        .submit {
          margin-top: 50px;
          button {
            width: 100%;
            height: 50px;
            border-radius: 15px;
            background: $primary-color;
            color: #fff;
            letter-spacing: 2px;
          }
        }
      }
    }
  }
}
</style>
